<%-- 
    Document   : index
    Created on : 20/04/2010, 14:52:30
    Author     : Koji
--%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Sistema de Monitoramento de &Ocirc;nibus de Linha via GPS</title>

	<script type="text/javascript" src="script/prototype.js"><!--nada--></script>
	<script type="text/javascript" src="script/wz_jsgraphics.js"><!--nada--></script>
</head>

<body>

    <table style="width:100%;">
        <tr style="width:100%;">
            <td style="width:30%;" valign="top">

    <fieldset style="width:30%; float:left;">
         <legend>Controle</legend>  

    <p>Pontos da Trajet&oacute;ria</p>
    <table id="pontos">
        <thead>
            <tr>
                <th>X</th
                <th>Y</th>
                <th>Ponto</th>
                <th>Local</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input name="x[0]"/></td>
                <td><input name="y[0]"/></td>
                <td><input name="ponto[0]" type="checkbox"/></td>
                <td><input name="local" type="radio" /></td>
            </tr>
            <tr>
                <td><input name="x[1]"/></td>
                <td><input name="y[1]"/></td>
                <td><input name="ponto[1]" type="checkbox"/></td>
                <td><input name="local" type="radio" /></td>
            </tr>
            <tr>
                <td><input name="x[2]"/></td>
                <td><input name="y[2]"/></td>
                <td><input name="ponto[2]" type="checkbox"/></td>
                <td><input name="local" type="radio" /></td>
            </tr>
            <tr>
                <td><input name="x[3]"/></td>
                <td><input name="y[3]"/></td>
                <td><input name="ponto[3]" type="checkbox"/></td>
                <td><input name="local" type="radio" /></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td><input type="button" id="appendRow" value="+" onclick="SIM.addPoint();"/><input type="button" id="deleteRow" value="-" onclick="SIM.removePoint();" disabled="true"/></td>
            </tr>
        </tfoot>
    </table>

    <p>Velocidade M&eacute;dia do &Ocirc;nibus</p>
    <p><input id="velocidade"/> km/h</p>

    <input value="Iniciar Monitoramento" type="button" id="start"/>
    <input value="Parar Monitoramento" type="button" id="stop"/>

</fieldset>
            </td>
            <td style="width: 70%;">
                <fieldset>
                    <legend>Monitoramento</legend>

                    <div id="mapa" style="width:800px; height:500px; border:thin solid #404040;position:relative;">
                        <div id="onibus"></div>
                        <div id="stops"></div>
                    </div>
                </fieldset>
            </td>
        </tr>
    </table>

    <div id="parameters">
        <input name="speed" id="speed" type="hidden" />
        <input name="currentPosition" id="currentPosition" type="hidden" />
        <input name="requiredPosition" id="requiredPosition" type="hidden" />
        <input name="pointsX" id="pointsX" type="hidden" />
        <input name="pointsY" id="pointsY" type="hidden" />
    </div>


<script type="text/javascript">
if(!SIM){
    var SIM = {
        jg : new jsGraphics("mapa"),

        jgBus : new jsGraphics("onibus"),

        jgStops : new jsGraphics("stops"),
        
        addPoint : function(){
            var tbody = $('pontos').down("tbody");
            tbody.insert("<tr><td><input name=\"x["+tbody.rows.length+"]\"/></td><td><input name=\"y["+tbody.rows.length+"]\"/></td><td><input name=\"ponto["+ tbody.rows.length +"]\" type=\"checkbox\"/></td><td><input name=\"local\" type=\"radio\"/></td></tr>");

            if(tbody.rows.length > 4){
                $('deleteRow').enable();
            }
        },
        removePoint : function(){
            var tbody = $('pontos').down("tbody");
            tbody.deleteRow(tbody.rows.length-1);

            if(tbody.rows.length == 4){
                $('deleteRow').disable();
            }
        },
        drawMap : function(){
            SIM.jg.clear();
            SIM.jg.setColor("#777");
            SIM.jg.setStroke(1);

            var tbody = $('pontos').down("tbody");
            var rows = tbody.rows;
            var Xpoints = new Array();
            var Ypoints = new Array();

            SIM.jgStops.clear();
            SIM.jgStops.setColor("blue");

            var xtd, xvalue, ytd, yvalue, ptd, ptvalue;

            for(var i=0; i<rows.length; i++){
                xtd = rows[i].down('td');
                xvalue = xtd.down('input').getValue();

                ytd = xtd.next('td');
                yvalue = ytd.down('input').getValue();

                ptd = ytd.next('td');
                ptvalue = ptd.down('input').getValue();

                Xpoints.push(parseInt(xvalue));
                Ypoints.push(parseInt(yvalue));

                if(ptvalue != null){
                    SIM.jgStops.drawImage('images/bus.gif',xvalue-10,yvalue-10, 20,20);
                    //SIM.jgStops.fillEllipse(xvalue-10,yvalue-10, 20,20);
                }
            }

            SIM.jg.setStroke(2);
            SIM.jg.drawPolygon(Xpoints, Ypoints);

            SIM.jg.paint();
            SIM.jgStops.paint();

        },
        startMonitor: function(){
            var speed = $('velocidade').getValue();
            $('speed').setValue(speed);

            var tbody = $('pontos').down("tbody");
            var rows = tbody.rows;

            var inputX = "";
            var inputY = "";

            for(var i=0; i<rows.length; i++){
                var x = tbody.down('input[name="x['+i+']"]');
                var y = tbody.down('input[name="y['+i+']"]');

                var xValuePix = x.getValue();
                var yValuePix = y.getValue();

                inputX = inputX + SIM.pixToKm(xValuePix) + ":";
                inputY = inputY + SIM.pixToKm(yValuePix) + ":";

                var location = tbody.rows[i].down('input[name="local"]').getValue();
                if(location != null){
                    $('requiredPosition').setValue(SIM.pixToKm(xValuePix)+':'+SIM.pixToKm(yValuePix));
                }

            }
            var x0 = tbody.down('input[name="x['+0+']"]');
            var y0 = tbody.down('input[name="y['+0+']"]');

            $('currentPosition').setValue(SIM.pixToKm(x0.getValue())+":"+SIM.pixToKm(y0.getValue()));

            inputX = inputX.substring(0,inputX.length-1);
            inputY = inputY.substring(0,inputY.length-1);

            $('pointsX').setValue(inputX);
            $('pointsY').setValue(inputY);

            SIM.continueMonitor();
        },
        pixToKm: function(value){
            return value/100;
        },
        kmToPix: function(value){
            return value*100;
        },
        continueMonitor:function(){
            SIM._monitor();
            SIM.to = setTimeout('SIM.continueMonitor();', 2000);
        },
        stopMonitor:function(){
            clearTimeout(SIM.to);
        },
        _monitor : function(){
            var speed = $('parameters').down('input#speed').getValue();
            var currentPosition = $('parameters').down('input#currentPosition').getValue();
            var requiredPosition = $('parameters').down('input#requiredPosition').getValue();
            var pointsX = $('parameters').down('input#pointsX').getValue();
            var pointsY = $('parameters').down('input#pointsY').getValue();

            new Ajax.Request('Monitor.action', {
                parameters:{
                    speed: speed,
                    currentPosition: currentPosition,
                    requiredPosition: requiredPosition,
                    pointsX: pointsX,
                    pointsY: pointsY
                },
                method:'post',
                onComplete:function(response){
                    var json = eval('(' + response.responseText + ')');
                    $('currentPosition').setValue(json['nextPoint']['x']+":"+json['nextPoint']['y']);

                    SIM.jgBus.clear();

                    //SIM.jgBus.setColor("red");
                    //SIM.jgBus.setStroke(50);
                    //SIM.jgBus.fillEllipse(SIM.kmToPix(json['nextPoint']['x'])-10,SIM.kmToPix(json['nextPoint']['y'])-10, 20,20);
                    SIM.jgBus.drawImage('images/bus1.jpg',SIM.kmToPix(json['nextPoint']['x'])-10,SIM.kmToPix(json['nextPoint']['y'])-10, 40,20);
                    var requiredx = parseInt(SIM.kmToPix(json['estimateTime']['requiredPoint']['x']));
                    var requiredy = parseInt(SIM.kmToPix(json['estimateTime']['requiredPoint']['y']));

                    var text = "Estimativa: ";
                    if(json['estimateTime']['time'] == 0){
                        text += "< 1 minuto";
                    } else if(json['estimateTime']['time'] == 1) {
                        text += "1 minuto";
                    } else {
                        text += json['estimateTime']['time'] + " minutos";
                    }
                    SIM.jgBus.drawStringRect(text, requiredx, requiredy, 100, 'center');

                    SIM.jgBus.paint();
                }
            });
        }
    }
}

$('start').observe('click', function(){
    SIM.drawMap();
    SIM.startMonitor();
});
$('stop').observe('click', function(){
    SIM.stopMonitor();
});

</script>


</body>
</html>
